<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>培训课程和课程的选择（XML）</title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$get("trainItemXML"),function(data){
					var items=data.getElementsByTagName("TrainItem");
					//console.log(items.lenght);
					for(var i=0;i<items.lenght;i++){
						var itemId=items[1].getElementsByTagName("itemId")[0].firstChild.nodeValue;
						var itemName=items[i].getElementsByTagName("itemName")[0].firstChild.nodeValue;
						var option=new Option(itemName,itemId);
						$("#selTrainItem").append(option);
					}
				},"xml";//指定响应数据类型为xml，未指定时会根据响应头信息自定判断
				
				$("#selTrainItem").change(function(){
					$("#selCourse")[0].length=1;
					var itemId=this.value;
					if(itemId==0){
						return;
					}
					$post("courseXML",{
						"flag":"train",
						"itemId":itemId
					},function(data{
						var courses=data.getElementsByTagName("Course");
						for(var i=0;i<courses.length;i++){
							var courseId=courses[i].getElementsByTagName("courseId")[0].firstChild.nodeValue;
							var courseName=courses[i].getElementsByTagName("courseName")[0].firstChild.nodeValue;
							var option=new Option(courseName,sourseId);
							$("#selCourse").append(option);
						}
					});//此处未指定响应数据类型，会自动识别为xml
				});
				
				$("#selCourse").change(function(){
					$("#info").empty();
					var courseId=this.value;
					if(courseId==0){
						return;
					}
					$.get("courseXML",{
						"flag":"course",
						"courseId":courseId
					},function(data){
						var courses=data.getElementsByTagName("Coourse");
						var coursesName=courses[0].getElementsByTagName("courseName")[0].firstChild.nodeValue;
						var period=courses[0].getElementsByTagName("period")[0].firstChild.nodeValue;
						var details=courses[0].getElementsByTagName("details")[0].firstChild.nodeValue;
					});
				});
			});
		</script>
		<style type="text/css">
			#info{
				width:500px;
				height:300px;
				border:1px solid red;
				font-size:24px;
			}
		</style>
	</head>
	<body>
		<select id="selTrainItem">
			<option value="0">--选择培训项目--</option>
		</select>
		<select id="selCourse">
			<option value="0">--选择课程--</option>
		</select>
		<div id="info"></div>
	</body>
</html>
